import { Descriptions, Typography, Image } from 'antd';

import * as APIS from '../../../../constants/api-constants';

const { Paragraph } = Typography;

interface TemplateDetailProps {
  currentTemplate: Questionnaire.Template | undefined;
}
export default ({ currentTemplate }: TemplateDetailProps) => (
  <Descriptions
    size="small"
    style={{ width: '100%' }}
    column={6}
    layout="vertical"
    bordered
  >
    <Descriptions.Item
      label="logo"
      span={2}
      contentStyle={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <Image
        width="200px"
        height="140px"
        src={`${APIS.IMAGE}/?filename=${currentTemplate?.logo}`}
      />
    </Descriptions.Item>
    <Descriptions.Item
      label="问卷编号开头"
      span={2}
    >
      {currentTemplate?.prefixion}
    </Descriptions.Item>
    <Descriptions.Item label="问卷标题" span={2}>
      {currentTemplate?.title}
    </Descriptions.Item>
    <Descriptions.Item label="问卷描述" span={2}>
      <Paragraph>
        {currentTemplate?.description}
      </Paragraph>
    </Descriptions.Item>
    <Descriptions.Item label="问卷结语" span={3}>
      <Paragraph>
        {currentTemplate?.epilog}
      </Paragraph>
    </Descriptions.Item>
  </Descriptions>
);
